<template>
<el-container class="skill-edit-page-main">
  <el-header class="header">
    <h1>技能编辑页面</h1>
  </el-header>
  <el-container class="edit-container">
    <el-main class="edit-main">
      <div class="edit-detail">
        <div class="info">
          <div class="name">
            <span>技能名称：</span>
            <el-input v-model="name" style="width: 440px"></el-input>
          </div>
          <div class="type">
            <span>技能类型：</span>
            <el-select v-model="type" style="width: 200px" clearable placeholder="请选择技能类型">
              <el-option
                v-for="item in types"
                :key="item.value"
                :label="item.key"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="summary">
            <span>技能摘要：</span>
            <el-input type="textarea"
                      :rows="3" style="width: 500px;vertical-align:top" placeholder="请输入摘要" v-model="summary"  ></el-input>
          </div>
          <div class="avatar">
            <input id="a1" type="file" ref="avatar" @change="uploadPicture" hidden>
            <img :src="picture">
            <label for="a1">
              <div>上传主图</div>
            </label>
          </div>
        </div>
        <div class="options">
          <el-button type="primary" @click="saveSkill()">提交</el-button>
          <el-button @click="$router.push('/admin/skill/skillManager')">返回主页</el-button>
        </div>
      </div>
      <div class="edit-chapter">
        <div class="chapter" v-for="(chapter, chapterIndex) in adminChapterUpdateVOList">
          <div class="chapter-info">
            <el-button @click="openSection(chapterIndex)" >{{adminChapterUpdateVOList[chapterIndex].isOpen == 1 ? '关闭章' : '打开章'}}</el-button>
            <div>章名称：<el-input v-model="chapter.title" style="width: 280px;font-size: 90%"></el-input></div>
            <div>章次序：<el-input v-model="chapter.sequence" style="width: 60px;margin-right: 50px"></el-input></div>
            <div class="btns">
              <el-button type="danger"  @click="deleteChapter(chapterIndex)">删除章</el-button>
              <el-button type="success" @click="saveChapter(chapterIndex)">保存章</el-button>
            </div>
          </div>
          <div class="sections" style="display: none">
            <div v-for="(section, sectionIndex) in chapter.adminSectionUpdateVOList">
              <div class="section">
                <el-button @click="openBlogAndVideo(chapterIndex, sectionIndex)">{{adminChapterUpdateVOList[chapterIndex].adminSectionUpdateVOList[sectionIndex].isOpen == 1 ? '关闭博客视频' : '打开博客视频'}}</el-button>
                <div>节名称：<el-input v-model="section.title" style="width: 250px"></el-input></div>
                <div>节次序：<el-input v-model="section.sequence" style="width: 60px;margin-right: 50px"></el-input></div>
                <div class="btns">
                  <el-button type="danger" @click="deleteSection(chapterIndex, sectionIndex)">删除节</el-button>
                  <el-button type="success" @click="saveSection(chapterIndex, sectionIndex)">保存节</el-button>
                </div>
                </div>
              <div class="blogAndVideo" style="display: none">
                <div class="P blogs">
                  <div class="p blog" v-for="(blog, blogIndex) in section.adminBlogUpdateVOList">
                      <div style="display: flex">
                        <div class="index" >{{blogIndex + 1}}</div>
                        <div><el-input v-model="blog.linkName" style="width: 90%;margin-bottom: 10px;"  placeholder="请输入博客的标题"></el-input></div>
                        <div><el-input v-model="blog.link" style="width: 90%" placeholder="请输入博客的链接"></el-input></div>
                      </div>
                      <div class="btns">
                        <el-button type="danger" @click="deleteBlog(chapterIndex, sectionIndex, blogIndex)">删除</el-button>
                        <el-button type="success" @click="saveBlog(chapterIndex, sectionIndex, blogIndex)">保存</el-button>
                      </div>
                  </div>
                  <el-button type="primary" @click="addBlog(chapterIndex, sectionIndex)">新建博客</el-button>
                </div>
                <div class="P videos">
                  <div class="p video" v-for="(video, videoIndex) in section.adminVideoUpdateVOList">
                    <div style="display: flex">
                      <div><el-input v-model="video.sequence" style="width: 90%;margin-bottom: 10px;" placeholder="请输入视频的次序"></el-input></div>
                      <div><el-input v-model="video.videoName" style="width: 90%;margin-bottom: 10px;" placeholder="请输入视频的标题"></el-input></div>
                      <div><el-input v-model="video.videoLink" style="width: 90%" placeholder="请输入视频的链接"></el-input></div>
                    </div>
                    <div class="btns">
                      <el-button type="danger" @click="deleteVideo(chapterIndex, sectionIndex, videoIndex)">删除</el-button>
                      <el-button type="success" @click="saveVideo(chapterIndex, sectionIndex, videoIndex)">保存</el-button>
                    </div>
                  </div>
                  <el-button type="primary" @click="addVideo(chapterIndex, sectionIndex)">新建视频</el-button>
                </div>
              </div>
            </div>
          </div>
          <el-button type="primary" style="margin: 10px auto" @click="addSection(chapterIndex)">新建节</el-button>
         </div>
        <el-button type="primary" @click="addChapter()">新增章</el-button>
      </div>
    </el-main>
  </el-container>
</el-container>
</template>

<script>
export default {
  name: "skill_edit",
  inject: ["reload"],
  data() {
    return {
      name: "",
      types: [
        {key: "电脑使用", value: "computer"},
        {key: "编程世界", value: "code"},
        {key: "健康生活", value: "life"},
        {key: "美妆护肤", value: "beauty"},
        {key: "投资理财", value: "money"},
      ],
      type: "",
      summary: "",
      picture:"",
      pictureFile:null,
      adminChapterUpdateVOList: [],
      adminChapterListVO: [],
    }
  },
  mounted: function () {
    this.getSkill();
  },
  methods:{
    openSection(chapterIndex) {
      var self = this;
      let sections = document.getElementsByClassName("sections")[chapterIndex];
      if(sections.style.display === "block") {
        sections.style.display = "none";
        self.$set(self.adminChapterUpdateVOList[chapterIndex], 'isOpen', 0);
        console.log(self.adminChapterUpdateVOList[chapterIndex]);
      } else {
        sections.style.display = "block";
        self.$set(self.adminChapterUpdateVOList[chapterIndex], 'isOpen', 1);
        console.log(self.adminChapterUpdateVOList[chapterIndex]);
      }
    },
    openBlogAndVideo(chapterIndex, sectionIndex) {
      var self = this;
      let blogAndVideo = document.getElementsByClassName("sections")[chapterIndex].getElementsByClassName("blogAndVideo")[sectionIndex];
      if(blogAndVideo.style.display === "flex") {
        blogAndVideo.style.display = "none";
        self.$set(self.adminChapterUpdateVOList[chapterIndex].adminSectionUpdateVOList[sectionIndex], 'isOpen', 0);
      } else {
        blogAndVideo.style.display = "flex";
        self.$set(self.adminChapterUpdateVOList[chapterIndex].adminSectionUpdateVOList[sectionIndex], 'isOpen', 1);
      }
    },
    //渲染图片
    uploadPicture() {
      const file = this.$refs.avatar.files[0];
      let url = null ;
      if (window.createObjectURL!=undefined) { // basic
        url = window.createObjectURL(file) ;
      }else if (window.webkitURL!=undefined) { // webkit or chrome
        url = window.webkitURL.createObjectURL(file) ;
      }else if (window.URL!=undefined) { // mozilla(firefox)
        url = window.URL.createObjectURL(file);
      }
      console.log(url);
      this.picture = url;
      this.pictureFile = file;
    },

    //渲染整个页面
    getSkill:function() {
      var self = this;
      var skillId = this.$route.params.id;
      if (skillId === undefined){
        return;
      }
      this.$axios({
        method: 'get',
        url: '/skill/skill/getAdminSkillVO/'+skillId,
        data: {}
      }).then(function(response) {
        var jsonString = JSON.stringify(response.data);
        var jsonObj = JSON.parse(jsonString);
        self.name = jsonObj.data.skillDo.name;
        self.summary = jsonObj.data.skillDo.summary;
        self.type = jsonObj.data.skillDo.type;
        self.picture = jsonObj.data.skillDo.picture;
        self.adminChapterUpdateVOList = jsonObj.data.skillDo.adminChapterUpdateVOList;
      });
    },
    // 添加章
    addChapter:function() {
      var self = this;
      var chapter = {id: "", skillId: this.$route.params.id, title: "", sequence: 0, adminSectionUpdateVOList: []};
      this.adminChapterUpdateVOList.push(chapter);
    },
    // 添加节
    addSection:function(chapterIndex) {
      var self = this;
      var section = {
        title: "", sequence: 0, addProperty: 1, adminBlogUpdateVOList: [], adminVideoUpdateVOList: []};
      self.adminChapterUpdateVOList[chapterIndex].adminSectionUpdateVOList.push(section);
    },
    // 添加博客
    addBlog: function(chapterIndex, sectionIndex) {
      var self = this;
      var blog = {linkName: "", link: "", addProperty: 1};
      self.adminChapterUpdateVOList[chapterIndex].adminSectionUpdateVOList[sectionIndex].adminBlogUpdateVOList.push(blog);
    },
    // 添加视频
    addVideo: function (chapterIndex, sectionIndex) {
      var self = this;
      var video = {videoName: "", videoLink: "", addProperty: 1};
      self.adminChapterUpdateVOList[chapterIndex].adminSectionUpdateVOList[sectionIndex].adminVideoUpdateVOList.push(video);
    },


    // 保存技能基本信息
    saveSkill:function() {
      var pic = "";
      var self = this;
      var skillId = this.$route.params.id;
      if(skillId == null){
        // 获取图片
        let file = this.pictureFile;
        let data = new FormData();
        data.append('file', file);
        this.$axios({
          url:'/oss',
          method: 'post',
          data,
          headers: {},
        }).then(res => {
          var jsonString = JSON.stringify(res.data);
          var jsonObj = JSON.parse(jsonString);
          pic = jsonObj.data.url;
          this.$axios({
            method: 'post',
            url: '/skill/skill/add',
            data: {
              name: self.name,
              summary: self.summary,
              type: self.type,
              picture:pic
            }
          }).then(function(response) {
            var jsonString = JSON.stringify(response.data);
            var jsonObj = JSON.parse(jsonString);
            if(jsonObj.success){
              alert("新增成功了");
            }
          });
        });
      }else {
        // 获取图片
        let file = this.pictureFile;
        let data = new FormData();
        data.append('file', file);
        this.$axios({
          url: '/oss',
          method: 'post',
          data,
          headers: {},
        }).then(res => {
          var jsonString = JSON.stringify(res.data);
          var jsonObj = JSON.parse(jsonString);
          pic = jsonObj.data.url;
          this.$axios({
            method: 'put',
            url: '/skill/skill/update',
            data: {
              id: skillId,
              name: self.name,
              summary: self.summary,
              type: self.type,
              picture: pic
            }
          }).then(function (response) {
            var jsonString = JSON.stringify(response.data);
            var jsonObj = JSON.parse(jsonString);
            if (jsonObj.success) {
              alert("修改成功了");
            }
          });
        });
      }
    },
    // 保存对应的章
    saveChapter: function (chapterIndex) {
      var self = this;
      var id = self.adminChapterUpdateVOList[chapterIndex].id;
      if(id != "") {
        this.$axios({
          method: 'put',
          url: '/skill/chapter/update',
          data: {
            id: self.adminChapterUpdateVOList[chapterIndex].id,
            title: self.adminChapterUpdateVOList[chapterIndex].title,
            sequence: self.adminChapterUpdateVOList[chapterIndex].sequence
          }
        }).then(function(response) {
          var jsonString = JSON.stringify(response.data);
          var jsonObj = JSON.parse(jsonString);
          if(jsonObj.success) {
            alert("修改成功了");
          } else {
            alert("修改失败");
          }
        });
      } else {
        this.$axios({
          method: 'post',
          url: '/skill/chapter/add',
          data: {
            skillId: this.$route.params.id,
            title: self.adminChapterUpdateVOList[chapterIndex].title,
            sequence: self.adminChapterUpdateVOList[chapterIndex].sequence,
            adminSectionAddVOList: []
          }
        }).then(function(response) {
          var jsonString = JSON.stringify(response.data);
          var jsonObj = JSON.parse(jsonString);
          if(jsonObj.success){
            alert("添加成功了");
            self.getSkill();
          } else {
            alert("添加失败");
          }
        });
      }
    },
    // 保存对应的节
    saveSection: function (chapterIndex, sectionIndex) {
      var self = this;
      var section = self.adminChapterUpdateVOList[chapterIndex].adminSectionUpdateVOList[sectionIndex];
      if(!('addProperty' in section)) {
        this.$axios({
          method: 'put',
          url: '/skill/section/update',
          data: {
            id: self.adminChapterUpdateVOList[chapterIndex].adminSectionUpdateVOList[sectionIndex].id,
            title: self.adminChapterUpdateVOList[chapterIndex].adminSectionUpdateVOList[sectionIndex].title,
            sequence: self.adminChapterUpdateVOList[chapterIndex].adminSectionUpdateVOList[sectionIndex].sequence
          }
        }).then(function(response) {
          var jsonString = JSON.stringify(response.data);
          var jsonObj = JSON.parse(jsonString);
          if(jsonObj.success){
            alert("修改成功了");
          }
        });
      } else {
        this.$axios({
          method: 'post',
          url: '/skill/section/add',
          data: {
            skillId: this.$route.params.id,
            chapterId: self.adminChapterUpdateVOList[chapterIndex].id,
            title: self.adminChapterUpdateVOList[chapterIndex].adminSectionUpdateVOList[sectionIndex].title,
            sequence: self.adminChapterUpdateVOList[chapterIndex].adminSectionUpdateVOList[sectionIndex].sequence,
            blogAddVOList: [],
            videoAddVOList: []
          }
        }).then(function(response) {
          var jsonString = JSON.stringify(response.data);
          var jsonObj = JSON.parse(jsonString);
          if(jsonObj.success) {
            alert("添加成功了");
            self.getSkill();
            console.log(self.adminChapterUpdateVOList);
          }
        });
        delete section.addProperty;
      }
    },
    // 保存博客
    saveBlog: function (chapterIndex, sectionIndex, blogIndex) {
      var self = this;
      var blog = self.adminChapterUpdateVOList[chapterIndex].adminSectionUpdateVOList[sectionIndex].adminBlogUpdateVOList[blogIndex];
      if(!('addProperty' in blog)) {
        this.$axios({
          method: 'put',
          url: '/skill/blog/update',
          data: {
            id: blog.id,
            linkName: blog.linkName,
            link: blog.link
          }
        }).then(function(response) {
          var jsonString = JSON.stringify(response.data);
          var jsonObj = JSON.parse(jsonString);
          if(jsonObj.success){
            alert("修改成功了");
            location.reload();
          }
        });
      } else {
        this.$axios({
          method: 'post',
          url: '/skill/blog/add',
          data: {
            sectionId: self.adminChapterUpdateVOList[chapterIndex].adminSectionUpdateVOList[sectionIndex].id,
            linkName: blog.linkName,
            link: blog.link
          }
        }).then(function(response) {
          var jsonString = JSON.stringify(response.data);
          var jsonObj = JSON.parse(jsonString);
          if(jsonObj.success) {
            alert("添加成功了");
            self.getSkill();
          }
        });
        delete blog.addProperty;
      }
    },
    // 保存视频
    saveVideo: function (chapterIndex, sectionIndex, videoIndex) {
      var self = this;
      var video = self.adminChapterUpdateVOList[chapterIndex].adminSectionUpdateVOList[sectionIndex].adminVideoUpdateVOList[videoIndex];
      if(!('addProperty' in video)) {
        this.$axios({
          method: 'put',
          url: '/skill/video/update',
          data: {
            id: video.id,
            sequence: video.sequence,
            videoName: video.videoName,
            videoLink: video.videoLink
          }
        }).then(function(response) {
          var jsonString = JSON.stringify(response.data);
          var jsonObj = JSON.parse(jsonString);
          if(jsonObj.success){
            alert("修改成功了");
            location.reload();
          }
        });
      } else {
        this.$axios({
          method: 'post',
          url: '/skill/video/add',
          data: {
            sectionId: self.adminChapterUpdateVOList[chapterIndex].adminSectionUpdateVOList[sectionIndex].id,
            sequence: video.sequence,
            videoName: video.videoName,
            videoLink: video.videoLink
          }
        }).then(function(response) {
          var jsonString = JSON.stringify(response.data);
          var jsonObj = JSON.parse(jsonString);
          if(jsonObj.success) {
            alert("添加成功了");
            self.getSkill();
          }
        });
        delete video.addProperty;
      }
    },





    // 删除章
    deleteChapter:function(chapterIndex) {
      var self = this;
      var chapter = self.adminChapterUpdateVOList[chapterIndex];
      var chapterId = self.adminChapterUpdateVOList[chapterIndex].id;
      if(chapter.id != "") {
        this.$confirm('此操作将删除该章, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios({
            method: 'delete',
            url: '/skill/chapter/delete/' + chapter.id,
            data: {}
          }).then(() => {
            this.reload();
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      } else {
        self.adminChapterUpdateVOList.splice(chapterIndex, 1);
      }
    },
    // 删除节
    deleteSection:function(chapterIndex, sectionIndex) {
      var self = this;
      var section = self.adminChapterUpdateVOList[chapterIndex].adminSectionUpdateVOList[sectionIndex];
      var sectionId = section.id;
      if(section.hasOwnProperty('id')) {
        this.$confirm('此操作将删除该节, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios({
            method: 'delete',
            url: '/skill/section/delete/' + sectionId,
            data: {}
          }).then(response => {
            location.reload();
          })
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      } else {
        self.adminChapterUpdateVOList[chapterIndex].adminSectionUpdateVOList.splice(sectionIndex, 1);
      }

    },
    // 删除博客
    deleteBlog: function (chapterIndex, sectionIndex, blogIndex) {
      var self = this;
      var blog = self.adminChapterUpdateVOList[chapterIndex].adminSectionUpdateVOList[sectionIndex].adminBlogUpdateVOList[blogIndex];
      var blogId = blog.id;
      if(blog.hasOwnProperty('id')) {
        this.$confirm('此操作将删除该博客, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios({
            method: 'delete',
            url: '/skill/blog/delete/' + blogId,
            data: {}
          }).then(response => {
            location.reload();
          })
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      } else {
        self.adminChapterUpdateVOList[chapterIndex].adminSectionUpdateVOList[sectionIndex].adminBlogUpdateVOList.splice(blogIndex, 1)
        location.reload();
      }
    },
    // 删除视频
    deleteVideo: function (chapterIndex, sectionIndex, videoIndex) {
      var self = this;
      var video = self.adminChapterUpdateVOList[chapterIndex].adminSectionUpdateVOList[sectionIndex].adminVideoUpdateVOList[videoIndex];
      var videoId = video.id;
      if(video.hasOwnProperty('id')) {
        this.$confirm('此操作将删除该视频, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios({
            method: 'delete',
            url: '/skill/video/delete/' + videoId,
            data: {}
          }).then(response => {
            location.reload();
          })
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      } else {
        self.adminChapterUpdateVOList[chapterIndex].adminSectionUpdateVOList[sectionIndex].adminVideoUpdateVOList.splice(videoIndex, 1);
        location.reload();
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../../assets/style/common";
.skill-edit-page-main{
  height: 100%;
  overflow: auto;
  .header {
    margin-bottom: 20px;
    text-align: center;
  }
  .edit-container {
    width: 1400px;
    margin: 0 auto;

    .edit-main {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 20px;

      .edit-detail {
        margin-bottom: 5px;

        .info {
          font-size: 16px;

          .name {
            display: inline-block;
            margin-right: 20px;
          }

          .type {
            display: inline-block;
          }

          .summary {
            margin-top: 20px;
            width: 600px;
          }

          .avatar {
            img {
              margin-left: 90px;
              width: 160px;
              height: 90px;
              border-radius: 5px;
            }
            input {
            }
            label {
              div {
                margin-left: 95px;
                width: 150px;
                @include btn_add();
              }
            }
          }
        }

        .options {
          width: 180px;
          margin: 5px auto 15px;
          display: flex;
          justify-content: space-between;
        }
      }

      .edit-chapter {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;

        .chapter {
          box-sizing: border-box;
          box-shadow: 3px 3px 15px #d4d4d4;
          border-radius: 10px;
          margin-bottom: 30px;
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;

          .chapter-info {
            width: 100%;
            box-sizing: border-box;
            padding: 5px 5px;
            border-radius: 10px;
            color: white;
            font-size: 90%;
            background-color: #379ec1;
            display: flex;
            justify-content: space-around;
            align-items: center;

            .btns {
            }
          }

          .sections {
            box-sizing: border-box;
            margin-top: 10px;
            width: 90%;

            > div {
              border-radius: 10px;
              box-shadow: 1px 1px 15px #d4d4d4;
              padding-bottom: 5px;
              margin-bottom: 10px;
            }

            .section {
              margin: 0 auto;
              background-color: #bee8ff;
              border-radius: 10px;
              display: flex;
              align-items: center;
              justify-content: space-around;
              padding-bottom: 5px;
              padding-top: 5px;
            }

            .blogAndVideo {
              box-sizing: border-box;
              margin: 10px auto;
              width: 90%;
              padding: 10px;
              display: flex;
              justify-content: space-between;
              border-radius: 10px;
              background-color: #efefef;

              .P {
                box-sizing: border-box;
                padding: 10px;
                border-radius: 10px;
                width: 47%;
                margin-bottom: 10px;
                background-color: #f6f6f6;
                display: flex;
                flex-direction: column;
                align-items: center;

                .p {
                  position: relative;
                  width: 90%;
                  margin-bottom: 10px;
                  margin-left: 30px;

                  .index {
                    position: absolute;
                    top: 5px;
                    line-height: 18px;
                    font-size: 14px;
                    left: -30px;
                    width: 18px;
                    height: 18px;
                    padding: 3px;
                    text-align: center;
                    border-radius: 50%;
                    color: #ffffff;
                    background-color: #a2a2a2;
                  }

                  .btns {
                    box-sizing: border-box;
                    width: 90%;
                    padding: 10px;
                    border-bottom: 1.5px #e3e3e3 solid;
                  }
                }
              }

              .blogs {

              }

              .videos {
              }
            }
          }
        }
      }
    }
  }
}
</style>
